<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Apple Page Wrapper - 苹果页面包装</title>
<style type="text/css">
	.w {
		width: 900px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.applewrap {
		width: 100%;
		display: block;
		height: 150px;
		background: white;
		border: 1px solid;
		border-color: #e5e5e5 #dbdbdb #d2d2d2;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
		-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
		box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
	}
	
	.applewrap .col {
		float: left;
		box-sizing: border-box;
		width: 250px;
		height: 150px;
		padding: 16px 7px 6px 22px;
		font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
		color: #343434;
		border-right: 1px solid #dadada;
	}
	.applewrap .col h2 {
		font-size: 15px;
		margin-bottom: 4px;
		font-weight: bold;
	}
	.applewrap .col.last {
		width: 350px;
		border-right-color: #fff;
	}	
	.applewrap .col.last img {
		float: right;
		position: relative;
		top: -20px;
	}
</style>
</head>
<body screen_capture_injected="true">
	<div class="w">
		<h1>#05 Apple Page Wrapper</h1>
		<div class="applewrap">
			<div class="col"><img src="http://demo.hongkiat.com/css3-box-shadows-effects/images/buystrip_hero.png" alt="Apple strip"></div>
			
			<div class="col">
				<h2>Some Text</h2>
				<p>This demonstration has to contain some type of content. So, here it is. I'm sure it all looks real fancy.</p>
			</div>
			
			<div class="col last">
				<h2>OSX Release Promo</h2>
				<img src="http://demo.hongkiat.com/css3-box-shadows-effects/images/promo_mountain_lion.png" alt="OSX Mountain Lion">
			</div>
		</div>
	</div>
</body>
</html>